<template>
<div class="pop">
  <van-search
      v-model="iptVal"
      :placeholder="iptPlaceHolder"
      show-action
      @search="search()"
      @input="input()"
      @cancel="leave()"
  />
  <history-hot v-if="blockShow == 1" :historyKeywordList="historyKeywordList" :hot-keyword-list="hotKeywordList" @historyTagClick="historyTagClick"></history-hot>
  <search-list v-else-if="blockShow == 2" :listArr="listArr" @cellClick="cellClick"></search-list>
  <my-product v-else :filterCategory="filterCategory" :goodsList="goodsList" @priceChange="priceChange" @categoryChange="categoryChange()"></my-product>
</div>
</template>

<script>
import HistoryHot from "@/components/HistoryHot";
import SearchList from "@/components/SearchList";
import {getSearchPopData,getSearchProductData,getSearchHelperData} from "@/request/api"
import MyProduct from "@/components/MyProduct";
export default {
name: "SearchPop",
  components:{
    HistoryHot,
    MyProduct,
    SearchList
  },
  data(){
  return {
    iptVal:'',
    iptPlaceHolder:'',
    // 1 代表历史记录与热门搜索区块 2代表列表区块 3代表产品区块
    blockShow:1,
    // 历史搜索列表
    historyKeywordList:[],
    // 热门搜索列表
    hotKeywordList:[],
    // 商品列表分类
    filterCategory:[],
    // 商品数据
    goodsList:[],
    //价格从多少到多少排序
    order:"desc",
    // 分类id
    categoryId:0,
    // 根据什么排序 id/price
    sort:'',
    listArr:[]
  }
  },
  methods:{
    leave(){
      this.$router.push('/home')
    },
    categoryChange(val){
      this.categoryId = val;
      this.search();
    },
    priceChange(val){
      console.log(val)
      this.order = val;
      this.sort = 'price';
      this.search();
    },
    async getSearchPopData(){
      const{data:res} = await getSearchPopData();
      console.log(res);
      if(res.errno == 0){
        let {defaultKeyword,historyKeywordList,hotKeywordList} = res.data;
        this.iptPlaceHolder = defaultKeyword.keyword;
        this.historyKeywordList = historyKeywordList;
        this.hotKeywordList = hotKeywordList;
      }
    },
    async search(){
      const {data:res} = await getSearchProductData({
        keyword:this.iptVal,
        order:this.order,
        categoryId:this.categoryId,
        sort:this.sort,
      });
      if(res.errno == 0){
        this.blockShow = 3;
        let {filterCategory,goodsList} = res.data;
        let arr = JSON.parse(JSON.stringify(filterCategory).replace(/name/g,'text').replace(/id/g,'value'))
        this.filterCategory = arr;
        console.log(arr)
        this.goodsList = goodsList;

      }
      console.log(res)
    },
    async input(){
      this.blockShow = 2;
      const {data:res} = await getSearchHelperData({
        keyword:this.iptVal
      });
      if(res.errno == 0) {
        console.log(res)
        this.listArr = res.data;
      }else{
        console.log('错误的调用接口了！')
      }
    },
    historyTagClick(item){
      // console.log('父组件1',item)
      this.iptVal = item;
      this.search();
    },
    cellClick(item){
      this.iptVal = item;
      this.search();
    }
  },
  created() {
    this.getSearchPopData();
  }
}
</script>

<style lang="less" scoped>
.pop {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color:#efefef;
  top: 0;
  left: 0;
  z-index: 99999;
}
</style>